<div class="page-header">
    <h1>Posts</h1>
</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-12">
        <form class="form form-inline">
            <div class="form-group">
                <div class="btn-group btn-group-sm">
                    <label class="btn btn-default" ng-class="{'btn-primary':statusOpt.value==c.value}"  ng-repeat="c in statusOpts" ng-model="statusOpt.value" uib-btn-radio="c.value">{{c.label|translate}}</label>
                </div>
<!--                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{statusOpt.label|translate}} <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">

                        <li ng-repeat="r in statusOpts">
                            <a ng-click="toggleStatus(r)">{{r.label|translate}}</a>
                        </li>
                    </ul>
                </div>-->
            </div>

            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="q" ></input>
                    <span class="input-group-btn">
                        <button class="btn btn-default" ng-click="search()"><span class="fa fa-search"></span></button>    
                    </span>
                </div>
            </div>
            <div class="form-group  pull-right">
                <button class="btn btn-success btn-block" ng-click="add()" style="min-width: 120px"><i class="fa fa-plus-circle"></i>{{'add'|translate}}</button>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <tr>
                    <th>
                {{'title'|translate}}
                </th>
                <th>
                {{'status'|translate}}
                </th>
                <th>
                {{'createdOn'|translate}}
                </th>
                <th>
                {{'createdBy'|translate}}
                </th>
                </tr>
                <tr ng-repeat="post in posts|orderBy:-createdOn">
                    <td><a ng-href="#/posts/{{post.id}}">{{post.title}}</a></td>
                    <td>{{post.status}}</td>
                    <td>{{post.createdDate}}</td>
                    <td>{{post.createdBy.name}}</td>
                </tr>
            </table>
        </div>
    </div>
</div> 
<uib-pagination boundary-links="true" total-items="totalItems" items-per-page="10" ng-model="p" ng-change="search()" class="uib-pagination" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>

